<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // 虚拟DOM是一个对象，虚拟DOM最终会被转为真实的DOM
    // createElement是React对象下的函数。
    {
        // 1- 第一个参数是标签的名字
        // const div = React.createElement("div");// div即是虚拟DOM对象也可以称为React元素。
        // // console.log(div);// {type:"div"}
        // root.render(div);// 判断是否为虚拟DOM，如果是虚拟DOM会转为真实的DOM元素，并渲染。
    }
    {
        // 2- 第二个参数是一个对象,可以配置属性
        // const div = React.createElement("div",{
        //     id:"one",
        //     className:"my"
        // });
        // console.log(div);// {type:"div",props:{id:"one",className:"my"}}
        // root.render(div);
    }
    {
        // 3- 第三个参数可以指定标签所包裹的内容
        // const div = React.createElement("div",{
        //     id:"one",
        //     className:"my"
        // },"我现在在大连，明天我要去鞍山！");
        // console.log(div);// {type:"div",props:{id:"one",className:"my",children:"我现在在大连，明天我要去鞍山！"}}
        // root.render(div);
    }
    {
        // 4- 第三个参数如果包含HTML标签，那么不会被浏览器所识别！
        // const div = React.createElement("div",{
        //     id:"one",
        //     className:"my"
        // },"<a>我现在在大连，明天我要去鞍山！</a>");
        // console.log(div);// {type:"div",props:{id:"one",className:"my",children:"我现在在大连，明天我要去鞍山！"}}
        // root.render(div);

    }
    {
        // 5- 第三个参数可以指定为一个虚拟DOM对象,如果需要省略属性对象(第二个参数)可以将其设置为null
        // 注意:准确的表达应该是从第三个参数开始即是包裹的内容.
        // const p1 = React.createElement("p",null,"大家好!我是一个p1标签");// {type:"p"}
        // const p2 = React.createElement("p",null,"大家好!我是一个p2标签");// {type:"p"}
        // const div = React.createElement("div",{
        //     id:"one",
        //     className:"my"
        // },[p1,p2]);
        // console.log(div);// {type:"div",props:{id:"one",className:"my",children:{type:"p",props:{children:"大家好!我是一个p标签"}}}}
        // root.render(div);
    }
</script>
</html>